<template>
    <el-dialog v-model="dialogVisible" :title="isEdit[1]" width="500" @closed="close">
        <el-form ref="formRef" :model="editForm" label-width="120px" :rules="rules">
            <el-form-item :label="TableLabel.Role + ': '" prop="Role">
                <MySelect v-model="editForm.Role" :options="ParamsObj.Role" :clearable="false"></MySelect>
            </el-form-item>
            <el-form-item :label="TableLabel.Username + ': '" prop="Username">
                <el-input v-model.trim="editForm.Username" :placeholder="PlaceholderLabel.Username"
                    clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Nickname + ': '" prop="Nickname">
                <el-input v-model.trim="editForm.Nickname" :placeholder="PlaceholderLabel.Nickname"
                    clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.RealName + ': '" prop="RealName">
                <el-input v-model.trim="editForm.RealName" :placeholder="PlaceholderLabel.RealName"
                    clearable></el-input>
            </el-form-item>
            <template v-if="!isEdit[0]">
                <el-form-item :label="TableLabel.ShopCode + ': '" prop="ShopCode">
                    <el-input v-model.trim="editForm.ShopCode" :placeholder="PlaceholderLabel.ShopCode"
                        clearable></el-input>
                </el-form-item>
                <el-form-item :label="TableLabel.PasswordSalt + ': '" prop="PasswordSalt">
                    <el-input v-model.trim="editForm.PasswordSalt" :placeholder="PlaceholderLabel.PasswordSalt"
                        clearable></el-input>
                </el-form-item>
                <el-form-item :label="TableLabel.Password + ': '" prop="Password">
                    <el-input v-model.trim="editForm.Password" :placeholder="PlaceholderLabel.Password"
                        clearable></el-input>
                </el-form-item>
            </template>
        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="Submit" :loading="loading">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { MySelect } from "@/components"
import { TableLabel, PlaceholderLabel } from "./ConfigData"
import * as types from "./types"
import { ShopEmployeeListApi } from "@/api/shop_manager/shop_employee_list"
import { FormInstance, FormRules } from "element-plus";
import MessageUti from "@/library/utils/MessageUti"

const props = defineProps<{
    visible: types.EditDialogType['visible']
    editForm: types.EditDialogType['editForm']
    ParamsObj: types.ParamsObjType
}>()

watch(() => props.editForm, (val) => {
    editForm.value = { ...val }
})

const emit = defineEmits<{
    (e: 'submitSuccess'): void
    (e: "update:visible", visible: boolean): void
}>()

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit("update:visible", val)
})

const initForm: types.EditDialogType['editForm'] = {} as types.EditDialogType['editForm']
const editForm = ref({ ...initForm })
const formRef = ref<FormInstance>()
const rules: FormRules = {
    ShopCode: { required: true, message: PlaceholderLabel.ShopCode, trigger: "blur" },
    Role: { required: true, message: PlaceholderLabel.Role, trigger: "blur" },
    Username: { required: true, message: PlaceholderLabel.Username, trigger: "blur" },
    Nickname: { required: true, message: PlaceholderLabel.Nickname, trigger: "blur" },
    RealName: { required: true, message: PlaceholderLabel.RealName, trigger: "blur" },
    PasswordSalt: { required: true, message: PlaceholderLabel.PasswordSalt, trigger: "blur" },
    Password: { required: true, message: PlaceholderLabel.Password, trigger: "blur" },
}

const isEdit = computed<[boolean, string]>(() => {
    const isTrue = editForm.value.Id !== undefined
    const message = isTrue ? '编辑' : "新增"

    return [isTrue, message]
})

const loading = ref(false)
const Submit = async () => {
    const valid = await formRef.value?.validate(() => { })
    if (!valid) { return }

    loading.value = true
    const useApi = isEdit.value[0] ? ShopEmployeeListApi.Update : ShopEmployeeListApi.Insert;

    try {
        await useApi(editForm.value as any)
        emit("submitSuccess")
        MessageUti.showSuccess((isEdit.value[1]) + "成功")
        close()
    }
    catch (error) { }
    finally {
        loading.value = false
    }
}

const close = () => {
    dialogVisible.value = false
    editForm.value = { ...initForm }
    formRef.value?.resetFields()
}

</script>

<style scoped></style>